<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>浮动练习一：浮动布局</title>
    <link rel="stylesheet" href="../css/reset.css">
  </head>
  <style>
    /* 
    这种没有将中间的间隔平分，而是靠两边的是5px,中间的是10px
    
     */
    body {
      background-color: #ccc;
    }

    .content {
      width: 1200px;
      height: 664px;
      /* background-color: pink; */
      margin: 0 auto;
    }

    .content>.wrap {}

    .item {
      width: 230px;
      height: 322px;
      background-color: #fff;
      margin: 0 5px 10px;
      float: left;
      text-align: center;
      line-height: 30px;
      font-size: 14px;
    }

    .item:hover {
      transform: scale(1.1);
    }

    .item>img {
      width: 230px;
      margin-bottom: 5px;
    }

    .item>span {
      display: block;
      height: 30px;
      /* background-color: yellow; */
      margin-bottom: 5px;
    }
  </style>

  <body>

    <div class="content">
      <div class="wrap">
        <ul>
          <li class="item item1"><img src="../image/belle.png" alt=""><span>女鞋</span><span>￥100</span></li>
          <li class="item item2"><img src="../image/bra.png" alt=""><span>女凶</span><span>￥100</span></li>
          <li class="item item3"><img src="../image/phone.png" alt=""><span>手机</span><span>￥100</span></li>
          <li class="item item4"><img src="../image/unbrella.png" alt=""><span>雨伞</span><span>￥100</span></li>
          <li class="item item5"><img src="../image/cleaner.png" alt=""><span>吸层器</span><span>￥100</span></li>
          <li class="item item6"><img src="../image/t-shikt.png" alt=""><span>T恤</span><span>￥100</span></li>
          <li class="item item7"><img src="../image/buddy.png" alt=""><span>大佛</span><span>￥100</span></li>
          <li class="item item8"><img src="../image/belle.png" alt=""><span>女鞋</span><span>￥100</span></li>
          <li class="item item9"><img src="../image/wacther.png" alt=""><span>手表</span><span>￥100</span></li>
          <li class="item item10"><img src="../image/err.png" alt=""><span>耳机</span><span>￥100</span></li>
        </ul>
      </div>
    </div>
  </body>

</html>